// router/index.js 路由文件
// 从vue-router解析createRouter

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';

// 引入Home组件
import Index from "../views/Index.vue";
import PersonalData from "../views/components/personalCenter/myCenter.vue";
import Shopping from "../views/components/cart/Shopping.vue";
// import {el} from "element-plus/es/locale";

// 创建路由
const router = createRouter({
    // 路由模式(哈希模式/#/)
    history: createWebHashHistory(),
    // 路由表
    linkActiveClass: 'blue',
    routes: [{
            path: '/', //路径
            redirect: '/index', // 重定向
        },
        {
            name: 'Index', // name不能有相同的名称
            path: '/index', //路径
            component: Index,
        },
        {
            name: 'Login', // name不能有相同的名称
            path: '/login', //路径
            component: () =>
                import ('@/views/Login.vue'), // 路由懒加载
        },
        {
            name: 'Cart', // name不能有相同的名称
            path: '/cart', //路径
            component: () =>
                import ('@/views/Cart.vue'), // 路由懒加载
            redirect: '/cart/shopping',
            children: [{
                    name: 'Shopping', // name不能有相同的名称
                    path: 'shopping', //路径
                    component: Shopping,
                    // 进入购物车判断是否登录
                    beforeEnter: (to, from, next) => {
                        // console.log(localStorage['token']);
                        if (localStorage['token']){
                            next();
                        }else {
                            next({ // 显示Affirms页
                                path: '/cart/affirms'
                            })
                        }
                    }
                },
                {
                    name: 'Order', // name不能有相同的名称
                    path: 'order', //路径
                    meta: {
                        requireAuth: true
                    },
                    component: () =>
                        import ('@/views/components/cart/Order.vue'), // 路由懒加载
                    // 进入提交订单页判断缓存是否有order值
                    beforeEnter: (to, from, next) => {
                        // console.log(sessionStorage['order']);
                        if (sessionStorage['order']){
                            next();
                        }else {
                            next({ // 显示主页
                                path: '/'
                            })
                        }
                    }
                },
                {
                    name: 'Affirm',
                    path: 'affirm',
                    meta: {
                        requireAuth: true
                    },
                    component: () =>
                        import ('@/views/components/cart/Affirm.vue'),
                    // 进入订单完成页判断缓存是否有orderid值
                    beforeEnter: (to, from, next) => {
                        // console.log(sessionStorage['order']);
                        if (sessionStorage['orderid']){
                            next();
                        }else {
                            next({ // 显示主页
                                path: '/'
                            })
                        }
                    }
                },
                {
                    name: 'Affirms',
                    path: 'affirms',
                    component: () =>
                        import ('@/views/components/cart/Affirms.vue')
                }
            ],
        },
        {
            name: 'Classify', // name不能有相同的名称
            path: '/classify', //路径
            component: () =>
                import ('@/views/Classify.vue'), // 路由懒加载
        },
        {
            name: 'PersonalCenter', // name不能有相同的名称
            path: '/personalCenter', // 路径
            component: () =>
                import ('@/views/PersonalCenter.vue'), // 路由懒加载
            redirect: '/personalCenter/myCenter',
            children: [
                {
                    path: '/personalCenter/myCenter',
                    meta: {
                        requireAuth: true
                    },
                    component: PersonalData
                },
                {
                    path: '/personalCenter/myCollection',
                    meta: {
                        requireAuth: true
                    },
                    component: () =>
                        import ('@/views/components/personalCenter/MyCollection.vue'),
                },
                {
                    path: '/personalCenter/myOrder',
                    meta: {
                        requireAuth: true
                    },
                    component: () =>
                        import ('@/views/components/personalCenter/MyOrder.vue'),
                },
                {
                    path: '/personalCenter/personalData',
                    meta: {
                        requireAuth: true
                    },
                    component: () =>
                        import ('@/views/components/personalCenter/PersonalData.vue'),
                },
                {
                    path: '/personalCenter/changePassword',
                    meta: {
                        requireAuth: true
                    },
                    component: () =>
                        import ('@/views/components/personalCenter/ChangePassword.vue'),
                },
                {
                    path: '/personalCenter/arrivalNotice',
                    meta: {
                        requireAuth: true
                    },
                    component: () =>
                        import ('@/views/components/personalCenter/ArrivalNotice.vue'),
                },
                {
                    path: '/personalCenter/afterApplication',
                    meta: {
                        requireAuth: true
                    },
                    component: () =>
                        import ('@/views/components/personalCenter/AfterApplication.vue'),
                },
                {
                    path: '/personalCenter/priceProtection',
                    meta: {
                        requireAuth: true
                    },
                    component: () =>
                        import ('@/views/components/personalCenter/PriceProtection.vue'),
                },
                {
                    path: '/personalCenter/addressAdministration',
                    meta: {
                        requireAuth: true
                    },
                    component: () =>
                        import ('@/views/components/personalCenter/AddressAdministration.vue'),
                },
                {
                    path: '/personalCenter/myCoupon',
                    meta: {
                        requireAuth: true
                    },
                    component: () =>
                        import ('@/views/components/personalCenter/MyCoupon.vue'),
                },
                {
                    name:'LineItem',
                    path: '/personalCenter/lineItem',
                    meta: {
                        requireAuth: true
                    },
                    component: () =>
                        import ('@/views/components/personalCenter/LineItem.vue'),
                },
            ]
        },
        {
            name: 'Product', // name不能有相同的名称
            path: '/product', //路径
            component: () =>
                import ('@/views/Product.vue'), // 路由懒加载
        },
        {
            name: 'NoFind', // name不能有相同的名称
            path: '/noFind', //路径
            component: () =>
                import ('@/views/NoFind.vue'), // 路由懒加载
        },
    ]
})

// 每次切换页面的时候，让页面回到最顶部
router.afterEach((to, from, next) => {
    window.scrollTo(0, 0);
});

// 判断此跳转路由的来源路由是否存在，存在的情况跳转到来源路由，否则跳转到404页面
router.beforeEach((to, from, next) => {
    //  从其他地方访问是否有这个地址
    if (to.matched.length === 0) {
        next('/noFind');
        return;
    }
    next();
});

//登录拦截
router.beforeEach((to,from,next)=>{
    if (to.meta.requireAuth) {//requireAuth若为true则该路由需要判断是否登录
        if (localStorage['token']) {//判断当前的token数据是否存在
            next();
        }
        else {
            next({//返回登录页面
                path: '/login?type=login',
                query: {redirect: to.fullPath}
            })
        }
    }
    else {
        next();
    }
})

// 暴露路由
export default router;